$namespace: mooc;
$font-color: #ececec;
$font-size: 18px;
$header-height : 79px;
$header-font-color : #B2B5BB;

header.reverse{

  background: #FDFDFD repeat 0 0 none;

  > nav {
    // nav
    &.mooc-nav {
      color : #252E37;

      // component
      .#{$namespace}-header-component {

        &.#{$namespace}-login {

          &:before{
          }

          // right component
          .#{$namespace}-right {
            color : #787D82;

            &.#{$namespace}-login-event {
              a.user_action{
                color : #787D82;
              }
            }

            // search component
            &.#{$namespace}-search {
              border-bottom: 1px solid #D9DDE1;

              //height: 100%;
              form {
                position: inherit;
                display: block;
                box-sizing: border-box;
              }
              input[type=text] {
                position: inherit;
                padding: 0.2em 2.1em 0.2em 0.4em;
                height: 24px;
                border: 0 solid transparent;
                border-radius: 3px;
                font-size: 16px;
              }
              input[type=text]:focus{
                text-decoration: none;
                outline: none;
              }

              // icon
              .#{$namespace}-search-icon {
                position: absolute;
                color: #7D7A7E;
                top: 0.2em;
                right: 0.4em;
              }
            }

            .#{$namespace}-avatar{
              width : 35px;
              height : 35px;
              border-radius: 50%;
              vertical-align: middle;
              margin-left : 10px;
            }


            .#{$namespace}-welcome {
              display: inline-block;
              height : 30px;
              line-height:30px;
              margin-left : 15px;
            }
            .#{$namespace}-panel {
              display: inline-block;
              width: 40px;
              height: 40px;
              vertical-align: middle;
              background: #ffffff url(../../../../../img/touxaing_2.png) 0 0;
              background-size: 100% 100%;
              border-radius: 50%;
            }
          }
        }

        &.#{$namespace}-logo-component {

          &:before{
            display: inline-block;
            height : 100%;
            vertical-align: middle;
            content : "";
          }

          > a.href_cr {
            display: inline-block;
            cursor: pointer;
            text-decoration : none;

            span {
              font-style: italic;
              font-size : 30px;
              font-weight: bold;
              vertical-align: middle;
              color : #000000;
            }
          }
        }

        // logo
        .#{$namespace}-logo {
          vertical-align: middle;
          display: inline-block;
          position: relative;
          background-size: auto 100%;
          background-image: url("../../../../../img/eda_logo.png");
          background-position: 0 0;
          width: 36px;
          height: 36px;
        }

        // list
        ul.#{$namespace}-header-list {
          height : 100%;
          margin-left : 20px;
          margin-top : 0px;
          margin-bottom: 0px;

          li {
            height : 100%;
            line-height : $header-height;
            float: left;
            padding : 0px 20px;
            font-size: $font-size;

            a{
              text-decoration: none;
              color : #252E37;
            }

            a:visited{
              color : #252E37;
              text-decoration: none;
            }

            a:hover{
              color : #252E37;
            }


            // mobile application
            &.#{$namespace}-mobile-application {
              i.fa::before {
                margin-right: 4px;
              }
              i {
                font-size : 24px;
                vertical-align: text-top;
              }
              span{
              }
            }
            a {
              text-decoration: none;
              color : #252E37;
            }
          }
          //li + li {
          //  margin-left: 10px;
          //}
        }
      }
    }
  }
}